<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>查卡详情</title>
    <script src="{{ asset('js/common.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ewin.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jweixin-1.0.0.js') }}" type="text/javascript"></script>

    <!-- Styles -->
    <style>
        @media screen and (max-device-width:320px){
            .base-info {
                width: 50px;
            }
        }
        @media screen and (min-width:321px){
            .base-info {
                width: 72px;
            }
        }
        .base-info {
            height: 32px;
            line-height: 32px;
            font-size: 16px;
            float: left;
            text-align: center;
        }
        .base-info input {
            font-size: 16px;
        }
        .account-input{
            height: 32px;
            width: 50%;
            float: left;
        }
        .account-input input {
            font-size: 16px;
            height: 32px;
            width: 100%;
        }
        .query-account .item {
            width: 100%;
            margin-top: 10px;
            font-size: 16px;
            display:  flex;
            height: 32px;
            line-height: 32px;
            border-bottom: 1px solid #DBDBDB;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .query-account .account-info {
            margin-top: 20px;
            height: 50px;
            font-size: 16px;
            text-align: center;
        }


        .query-account .account-right input{
            width: 80%;
        }
        .query-account .left {
            padding-left: 30px;
            color: #777;
        }

        .query-account .right {
            padding-right: 30px;
            font-size: 16px;
            color:#000;
        }

        h4{
            height: 32px;
            line-height: 32px;
            margin-left: 10px;
        }

    </style>
</head>
<body>
<div class='query-account' style='display:block;'>
    <div style="border:1px solid #ddd;background:#FFF;">

        <div class='account-info'>
            <div class="base-info">卡号</div>
            <div class="account-input">
                 <input name="account" placeholder="  输入卡号" style="border: 1px solid rgb(221,221,221);"/>
            </div>
            <div style="width:15%;height:34px;padding: 0 5px;float: left">
                <span class="input-group-addon" id="saoyisao" style="background-image:url({{URL::asset('images/sys.png')}});background-size: 100% 100%;width: 34px;height:34px;border:none;"></span>
            </div>
            <button type="button" class="btn btn-default" id="reload" style="float: left;padding: 6px;!important;">刷新</button>
        </div>
    </div>
    <div class="package-box">
        <h4>卡号信息</h4>
        <div style="border:1px solid #ddd;background:#FFF;">
            <div class='item'>
                <div class='left'>卡状态</div>
                <div class='right account-status'></div>
            </div>
            <div class='item' style="border:none;display: none;" id="total_usage_show">
                <div class='left' style="float:left;">已使用总流量(M)</div>
                <div class='right total-usage' style="float:right;"></div>
            </div>
        </div>
    </div>
    <div class="package-box">
        <h4>套餐信息</h4>
        <div class="product-list-have" style="border:1px solid #ddd;background:#FFF;">

        </div>
    </div>
</div>
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在加载，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                <p id="message-content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    wx.config({
        debug: false,
        appId: '{{$configData['appId']}}',
        timestamp: '{{$configData['timestamp']}}',
        nonceStr: '{{$configData['nonceStr']}}',
        signature: '{{$configData['signature']}}',
        jsApiList: [
            'checkJsApi',
            'openAddress',
            'scanQRCode'
        ]
    });
    var openid = '{{$configData['openid']}}';
    var rank = '{{$configData['rank']}}';
    if(rank){
    	rank = parseInt(rank);
    }
    $("input[name='account']").bind('input propertychange', function () {
        var account = $(this).val().replace(/(^\s*)|(\s*$)/g, "");
        if (account && account.length == 16) {
            getAccountDetail(account);
        }
    });
    $('#reload').click(function () {
        var account = $("input[name='account']").val().replace(/(^\s*)|(\s*$)/g, "");
        if(!account){
            $("#message-content").text("请输入卡号...");
            $("#myModal").modal();
            return;
        }
        if(account && account.length > 16){
            $("#message-content").text("卡号不符合规范");
            $("#myModal").modal();
            return;
        } else {
            if (account && account.length == 16) {
                getAccountDetail(account);
            }
        }
    });
    var account = getQueryVariable('account');
    if(account){
        getAccountDetail(account);
        $("input[name='account']").attr('value',account);
    }
    function getAccountDetail(account) {
        $('#loading').modal('show');
        $.ajax({
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            headers: {
                'content-type': 'application/json'
            },
            url: URL+'/recharge',
            timeout: 60000,
            data: {action: 'detail', keyword: account},
            success: function (res) {

                if(res.code==400 ||  res.message =="Invalid keyword parameter"){
                    $('#loading').modal('hide');
                    $("#message-content").text("卡号不正确");
                    $('.product-list-no').css('display','block');
                    $("#myModal").modal();
                    return;
                }
                if( res.status=='error'){
                    $('#loading').modal('hide');
                    $("#message-content").text("请求错误");
                    $('.product-list-no').css('display','block');
                    $("#myModal").modal();
                    return;
                }
                var arr = res.item;
                // console.log(arr);
                if (!arr.dataPackage) {
                    $('#loading').modal('hide');
                    $("#message-content").text("无套餐信息");
                    $('.product-list-no').css('display','block');
                    $("#myModal").modal();
                }else{
                    $('.product-list-have').css('display','block');
                }
                var status = $('.account-status');
                switch (arr.accountStatus) {
                    case 0:
                        status.text('未激活');
                        status.css({color: 'red'});
                        break;
                    case 1:
                        status.text('已激活');
                        status.css({color: 'green'});
                        break;
                    case 2:
                        status.text('已关闭');
                        status.css({color: 'red'});
                        break;
                    case 3:
                        status.text('已过期');
                        status.css({color: 'red'});
                        break;
                    case 4:
                        status.text('已销户');
                        status.css({color: 'red'});
                        break;
                    default:
                        break;
                }
                if(rank>=3){
                    $('#total_usage_show').css('display','block');
                    $('.total-usage').text(arr.dataUsageTotal?arr.dataUsageTotal.toFixed(2):'');
                } else {
                    $('#total_usage_show').css('display','none');
                }
                var products = arr.dataPackage;
                var content ='';
                for (var i=0;i<products.length;i++) {
                    var productName = products[i].productName;
                    if (productName) {
                        var search = "每天";
                        var end = productName.indexOf(search);//获得字符串的开始位置
                        if (end != -1) {
                            var lastName = productName.substring(0, end);//截取字符串
                        } else {
                            var lastName = productName;
                        }
                    } else {
                        lastName = '';
                    }
                    content += '<div class="item"><div class="left" style="font-weight: bold;">套餐'+(i+1)+'</div></div>'+
                            '<div class="item"><div class="left" >套餐ID</div><div class="right">'+products[i].otwProductId+'</div></div>';
                    if(rank>=3){
                        content += '<div class="item"><div class="left" >套餐名称</div><div class="right">'+lastName+'</div></div>';
                    }
                    content += '<div class="item"><div class="left" >套餐有效期(天)</div><div class="right">';
                    if(products[i].validDays>=0){
                        content += products[i].validDays;
                    } else if(products[i].validDays==-1){
                        content += '无限';
                    }  else if(products[i].validDays==''){
                        content += '';
                    }
                    content += '</div></div>';
                    content += '<div class="item"><div class="left" >套餐状态</div><div class="right">';
                    if(products[i].status==0){
                        content += '未激活';
                    } else if(products[i].status==1){
                        content += '已激活';
                    }  else if(products[i].status==2){
                        content += '已关闭';
                    }  else if(products[i].status==3){
                        content += '已过期';
                    } else {
                        content += '';
                    }
                    content += '</div></div>';
                    content += '<div class="item"><div class="left" >套餐激活时间</div><div class="right">'+products[i].activeTime+'</div></div>';
                    content += '<div class="item"><div class="left" >套餐过期时间</div><div class="right">'+products[i].expiryTime+'</div></div>';
                    content += '<div class="item"><div class="left" >总流量(M)</div><div class="right">';
                    if(products[i].dataTotal==-1){
                        content += '无限';
                    } else{
                        content += (products[i].dataTotal?products[i].dataTotal.toFixed(2):'');
                    }
                    content +='</div></div>';
                    content += '<div class="item"><div class="left" >已使用总流量(M)</div><div class="right">'+(products[i].dataUsage?products[i].dataUsage.toFixed(2):'')+'</div></div>';
                    content += '<div class="item"><div class="left" >当天使用流量(M)</div><div class="right">'+(products[i].dataToday?products[i].dataToday.toFixed(2):'')+'</div></div>';
                    content += '<div class="item" style="height: auto"><div class="left" >支持上网区域</div><div class="right">'+products[i].zoneName+'</div></div>';
                }
                $('.product-list-have').children().remove();
                $('.product-list-have').append(content);
                $('#loading').modal('hide');
            },
            //请求失败，包含具体的错误信息
            error: function (res) {
                $('#loading').modal('hide');
                if (!res) {
                    $("#message-content").text("数据异常，请联系客服");
                    $("#myModal").modal();
                } else {
                    var message = res.data.message;
                    var noticeContent = '';
                    if (message == 'Invalid keyword parameter') {
                        noticeContent = '查询条件不正确';
                    } else {
                        noticeContent = message;
                    }
                    $("#message-content").text(noticeContent);
                    $("#myModal").modal();
                }

            }
        });
    }
    //扫描二维码
    document.querySelector('#saoyisao').onclick = function() {
        wx.scanQRCode({
            needResult : 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType : [ "qrCode", "barCode" ], // 可以指定扫二维码还是一维码，默认二者都有
            success : function(res) {
                var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                if(result.indexOf(",")>=0){
                    var tempArray = result.split(',');
                    var tempNum = tempArray[1];
                    account=tempNum;
                    $("input[name='account']").prop('value', account);
                }else{
                    $("input[name='account']").prop('value', result);
                    account=result;
                }
                getAccountDetail(account);
            }
        });
    };
</script>

